<template>
  <div>
    <Button type="success" :to="{path:'Product-add',query:{}}">
      添加成品编码
    </Button>
    <Card style="width:100%">
      <row type="flex" justify="space-between">
        <i-col>

          <span class="key" style="margin-left: 20px">合成名称:</span>
          <Input v-model="name" placeholder="请输入合成名称" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px">合成编码:</span>
          <Input v-model="code" placeholder="请输入合成编码" class="width-condition" style="width: 180px"/>

          <span class="key" style="margin-left: 20px">材质分类代码:</span>
          <Input v-model="categoryCode" placeholder="请输入材质分类代码" class="width-condition" style="width: 180px"/>

          <Button type="success" icon="ios-search" style="margin-left: 50px" @click="find">查询</Button>
        </i-col>
      </row>
    </Card>

    <Table stripe :columns="columns" :data="data"></Table>

    <row style="margin-top: 10px">
      <i-col align="right">
        <Page show-sizer :total="total" show-total @on-change="onChange" @on-page-size-change="onPageSizeChange"/>
      </i-col>
    </row>

    <div>
      <p style="float: left;font-size: 20px">请输入下载条数： </p>
      <InputNumber :max="65535" :min="1" v-model="altogether"
                   style="margin-left: 20px;margin-right: 20px;width: 100px"
                   @keyup.native="UpNumber" @keydown.native="UpNumber"/>

      <Button type="primary" @click="ProductAltogether">下载Excel</Button>

    </div>


  </div>
</template>

<script>
  import { ProductFindAll, ProductDeleteById,ProductAltogether} from "../../../api/data"

  export default {
    data() {
      return {
        page: 1,//page 第几页
        pageSize: 10,//pageSize:每页几条数据
        total: 0,
        code: '',
        name:'',
        altogether:0,
        categoryCode: '',
        columns: [
          {
            title: '类型',
            key: 'categoryCode',
          },
          {
            title: '色号代码',
            key: 'colorCode'
          },
          {
            title: '颜色代码',
            key: 'colourCode'
          },
          {
            title: '类型代码',
            key: 'typeCode'
          },
          {
            title: '材质代码',
            key: 'materialQualityCode'
          },
          {
            title: '弹簧代码',
            key: 'springCode'
          },
          {
            title: '规格代码',
            key: 'specificationCode'
          },
          {
            title: '型号代码',
            key: 'modelCode'
          },
          {
            title: '价格/元',
            key: 'price'
          },
          {
            title: '合成编码',
            key: 'code'
          },
          {
            title: '合成名称',
            key: 'name'
          },
          {
            title: '描述',
            key: 'describe'
          },
          {
            title: '操作',
            key: 'action',
            width: 180,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        path: 'Product-update', query: {
                          id: params.row.id,
                        }
                      })
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认删除',
                        content: '是否要删除当前编码？',
                        onOk: () => {
                          this.ProductDeleteById(params.row.id);
                        },
                        onCancel: () => {
                        }
                      })
                    },
                  }
                }, '删除')
              ]);
            }
          }

        ],
        data: [],
        product:[]
      }
    },
    mounted() {
      this.ProductFindAll();
    },
    methods: {
      UpNumber(e) {
        e.target.value = e.target.value.replace(/[^\d]/g, '');
      },
      find() {
        this.ProductFindAll();
      },
      ProductFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          name: this.name,
          code: this.code,
          categoryCode: this.categoryCode,
        };
        ProductFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.data = data.data.data.list;
            this.total = data.data.data.total;
          }
        })
      },
      onPageSizeChange(pageSize) {
        this.page = 1;
        this.pageSize = pageSize;
        this.ProductFindAll();
      },
      onChange(page) {
        this.page = page;
        this.ProductFindAll();
      },
      ProductDeleteById(id) {
        let data = {
          id: id
        }
        ProductDeleteById(data).then(res => {
          this.ProductFindAll();
        })
      },

      ProductAltogether() {
        var data = {
          name: this.name,
          code: this.code,
          categoryCode: this.categoryCode,
          altogether: this.altogether
        };
        ProductAltogether(data).then(data => {
          if (data.data.code == 0) {
            this.product = data.data.data;
            if (this.product == null) {
              this.$Message.error("请输入下载条数");
            } else {
              this.exportToExcel();
            }
          }
        })
      },
      exportToExcel() {
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('../../../assets/js/Export2Excel');

          const tHeader = ['类型', '色号代码', '颜色代码', '类型代码', '材质代码', '弹簧代码', '规格代码', '型号代码', '价格/元', '合成编码', '合成名称','描述'];
          const filterVal = ['categoryCode', 'colorCode', 'colourCode', 'typeCode', 'materialQualityCode', 'springCode', 'specificationCode', 'modelCode', 'price', 'code', 'name', 'describe'];
          const list = this.product;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '成品编码');
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }

    }
  }
</script>

<style>
  .width-condition {
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
  }
</style>
